<script lang="ts" setup name="RoleBack">
import { CirclePlus, Delete, EditPen, Setting, View } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { User } from '~/src/api/interface/user'
import {
  deleteRoleBackAPI,
  getLoadMenuPageDictListAPI,
  getRoleAuthorityAPI,
  getRoleBackAPI,
  setLoadMenuPageDictListAPI,
  setRoleAuthorityAPI,
} from '~/src/api/user'
import PowerDialog from '../components/PowerDialog.vue'
import RoleBackDialog, { AddDialogExpose } from '../components/RoleBackDialog'
import RolePosDialog from '../components/RolePosDialog.vue'
import { roleBackColumns } from './info/column'
const data = reactive<User.RoleBack>({ roleCode: '', roleName: '', comments: '', categoryId: 1 })
const roleBackDialogRef = ref<AddDialogExpose>()
const openDialog = (title: string, row?: User.RoleBack) => {
  roleBackDialogRef.value?.setParams({ title, data: row ? row : data })
}
const proTableRef = ref<ProTableInstance>()

// 删除
const deleteAccount = async (params: User.RoleBack) => {
  await useHandleData(deleteRoleBackAPI, { id: params.id }, `删除【${params.roleName}】角色`)
  proTableRef.value?.getTableList()
}
// 权限管理
const powerDialogRef = ref<InstanceType<typeof PowerDialog> | null>(null)
const openPowerDialog = async (rowId: number) => {
  const { data } = await getLoadMenuPageDictListAPI({ id: rowId })
  const params = {
    title: '选择权限',
    isView: false,
    id: rowId,
    row: cloneDeep(data),
    api: setLoadMenuPageDictListAPI, // 添加接口
    getTableList: proTableRef.value?.getTableList,
  }
  powerDialogRef.value?.acceptParams(params)
}

const rolePosDialogRef = ref<InstanceType<typeof RolePosDialog> | null>(null)
const openRolePosDialog = async (rowId: number) => {
  const { data } = await getRoleAuthorityAPI({ id: rowId })
  const params = {
    title: '编辑收银权限',
    isView: false,
    row: { ...data },
    api: setRoleAuthorityAPI, // 添加接口
  }
  rolePosDialogRef.value?.acceptParams(params)
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table ref="proTableRef" :columns="roleBackColumns" :request-api="getRoleBackAPI" title="角色列表">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openDialog('新增')">新增角色</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-dropdown trigger="hover">
          <el-button type="primary">
            操作菜单
            <el-icon><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-button v-auth="'edit'" :icon="EditPen" link type="primary" @click="openDialog('编辑', scope.row)">编辑</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button v-auth="'delete'" :icon="Delete" link type="primary" @click="deleteAccount(scope.row)">删除</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button v-auth="'set'" :icon="View" link type="primary" @click="openPowerDialog(scope.row.id)">权限分配</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button v-auth="'posSet'" :icon="Setting" link type="primary" @click="openRolePosDialog(scope.row.id)">
                  收银权限
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </pro-table>
    <role-back-dialog ref="roleBackDialogRef" @on-ok="() => proTableRef?.getTableList()" />
    <power-dialog ref="powerDialogRef" />
    <role-pos-dialog ref="rolePosDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
